<template>
	<view class="address-list">
		<view class="header">
			<!-- 搜索框 -->
			<u-search placeholder="搜索" :show-action="false" @search="search" v-model="keyword"></u-search>
			<!-- 最近交办列表 -->
			<view class="title">
				部门列表
			</view>
			<view class="history-list">
				<view class="item" v-for="(item, index) in departmentList" :key="item.id"
					@click="handleChangeActive(item, index)">
					<u-image width="114rpx" height="114rpx" shape="circle" :src="item.image"></u-image>
					<view class="department" :class="currentDepartmentIndex === index ? 'active' : ''">
						{{item.name}}
					</view>
					<!-- <view class="name">
						张小三
					</view> -->
				</view>
			</view>
		</view>
		<!-- 通讯录 -->
		<view class="all-list">
			<!-- <u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
			<view class="" style="height: 80rpx;padding-left: 20rpx;line-height: 80rpx;font-size: 30rpx;font-weight: 500;">
				选择交办人
			</view>
			<view class="line"></view>
			<address-item v-for="(item, index) in personList" :key="index" :info="item" @click="handleClick"></address-item>
		</view>
		<!-- 模态框 -->
		<u-modal v-model="show" @confirm="confirm" :show-title="false" :show-cancel-button="true">
			<view class="wrap">
				<view class="title">
					交办给：
				</view>
				<address-item :info="assignPerson"></address-item>
				<view class="content">
					<view class="content-title">
						{{info.fq_name_text}}的诉求：
					</view>
					<view class="content-text">
						{{info.content}}
					</view>
				</view>
			</view>
		</u-modal>
	</view>
	<!-- <u-popup v-model="show" mode="center" width="630" height="500" border-radius="10">
				<view class="content">
					<view class="title">
						交办给：
					</view>
				</view>
				<view class="btn">
					
				</view>
	</u-popup> -->
</template>

<script>
	import AddressItem from './address_item/AddressItem.vue'
	import {
		apiGetDepartmentCategory,
		apiGetDepartmentPerson,
		apiSearchByname
	} from '@/api/department/department.js'
	import CONFIG from '@/config/config.js'
	import { apiAppealRecord } from '@/api/backlog/backlog.js'
	export default {
		name: 'AddressList',
		components: {
			AddressItem
		},
		data() {
			return {
				keyword: '',
				//tabs
				tabList: [{
						name: '同级交办'
					},
					{
						name: '上级交办'
					}
				],
				current: 0,
				//模态框
				show: false,
				//代办事项id
				id: '',
				//备注
				remark: '',
				//部门列表
				departmentList: '',
				currentDepartmentIndex: 0,
				//人员列表
				personList: [],
				//代办事项详情
				info: {},
				//交办人
				assignPerson: {}
			}
		},
		async onShow() {
			const {
				info,
				remark
			} = this.$Route.query;
			this.id = info.id;
			this.info = info;
			console.log(this.info);
			this.remark = remark;
			await this.apiGetDepartmentCategory();
			//默认选中第一项
			this.departmentList[0].isActive = true;
			this.apiGetDepartmentPerson(this.departmentList[0].id);
		},
		methods: {
			//tabs切换
			change(index) {
				this.current = index;
			},
			search () {
				this.apiSearchByname();
			},
			//点击联系人时触发
			handleClick(info) {
				this.assignPerson = info;
				this.show = true;
			},
			//模态框点击确定时触发
			async confirm() {
				await this.apiAppealRecord();
				await uni.showToast({
					title: '交办成功',
					icon: "success"
				})
				this.$Router.back(2);
			},
			//部门列表点击事件
			handleChangeActive(item, index) {
				if (this.currentDepartmentIndex === index) return;
				this.currentDepartmentIndex = index;
				this.apiGetDepartmentPerson(item.id);
			},
			//获取部门分类
			async apiGetDepartmentCategory() {
				const res = await apiGetDepartmentCategory(this.id);
				this.departmentList = res.data;
				this.departmentList.forEach(item => {
					item.isActive = false;
					item.image = CONFIG.baseUrl + item.image;
				})
				console.log(res)
			},
			//获取部门下人员
			async apiGetDepartmentPerson(id) {
				const res = await apiGetDepartmentPerson(id);
				if (!res.data) {
					res.data = [];
				}
				this.personList = res.data;
				console.log(this.personList)
				//为人员信息添加部门名字
				this.personList.forEach(item => {
					item.departmentName = this.departmentList[this.currentDepartmentIndex].name;
				})
			},
			//交办事项
			async apiAppealRecord () {
				const organization_classify_id = getApp().globalData.organization_classify_id;
				const res = await apiAppealRecord(this.id, this.assignPerson.id, 1, this.remark, '', '', organization_classify_id);
			},
			//根据名字搜索
			async apiSearchByname () {
				const res = await apiSearchByname(this.keyword);
				this.personList = res.data.list;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-list {
		.header {
			padding: 20rpx;
			width: 750rpx;
			height: 404rpx;
			background: #FFFFFF;
			border-radius: 0px 0px 20rpx 20rpx;

			.title {
				margin-top: 29rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #000000;
			}

			// 最近交办列表
			.history-list {
				display: flex;
				margin-top: 30rpx;
				margin-left: 20rpx;
				overflow-y: auto;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 25%;
					font-size: 26rpx;
					flex-shrink: 0;

					.department {
						margin-top: 12rpx;
						&.active {
							color: #0081FF;
						}
					}
				}
			}
		}

		//全部通讯录样式
		.all-list {
			margin-top: 30rpx;
			// width: 750rpx;
			// height: 1014rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0px 0px;

			.line {
				width: 750rpx;
				height: 1px;
				background: #E5E5E5;
			}
		}
	}

	.wrap {
		padding: 30rpx;
		padding-bottom: 47rpx;

		.title {
			color: red;
			font-size: 34rpx;
			font-weight: 500;
			color: #000000;
		}

		.content {
			padding: 20rpx;
			height: 150rpx;
			background: #EAF1F9;
			border-radius: 10rpx;

			.content-title {
				font-size: 26rpx;
				font-weight: 500;
				color: #929292;
			}

			.content-text {
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #929292;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>
